<template>
  <!-- 外部容器 -->
  <div class="wrap">
    <!-- 左导航组件 -->
    <leftNavVue></leftNavVue>
    <!-- 顶部top -->
    <indexTopTitle></indexTopTitle>
    <!-- 中间音乐区域 -->
    <musicAreaVue></musicAreaVue>
    <!-- 底部播放器 -->
    <bottomPlayAreaVue></bottomPlayAreaVue>
  </div>
</template>

<script>
// 组件的引入
import leftNavVue from './leftNav.vue';
import indexTopTitle from './indexTopTitle.vue';
import musicAreaVue from './musicArea.vue';
import bottomPlayAreaVue from './bottomPlayArea.vue';
export default {
  //组件名称
  name: "indexMain",
  //数据
  data() {
    return {};
  },
  //组件的注册
  components:{
    leftNavVue,
    indexTopTitle,
    musicAreaVue,
    bottomPlayAreaVue
  },
  //方法
  methods: {},
  //钩子函数mounted()
  mounted() {},
};
</script>

<style scoped>
.wrap {
  width: 810px;
  height: 690px;
  margin: 30px auto;
  background-color: #eee;
  position: relative;
  padding-left: 210px;
  box-shadow: 0 0 50px #d5d5d5;
}
</style>
